<template>
    <view class="page">
        <view class="header">
            <view style="opacity: 0">1</view>
            <view class="nav" :style="{ background, padding: `${statusBarHeight} 0 10px` }">
                <view class="back" @click="onBack">
                    <u-icon size="45" name="arrow-left"/>
                </view>
                报告详情
            </view>
            <view class="row" :style="{marginTop:`${isNewIphone()?85:65}px`}">
                <view class="content">
                    <view class="title">体重仪器检测报告
                        <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/share.png" class="share" @click="shareShow=true"/>
                    </view>
                    <view class="text">报告编号：{{ data.code }}</view>
                    <view class="time">{{ data.createTime }}</view>
                </view>
            </view>
        </view>
        <view class="wrapper detail" :style="{marginTop: `${isNewIphone()?-130:-150}px!important`}">
            <view>
                <view class="name">{{ data.name }}</view>
                <view class="row">
                    <view class="item">身高 (cm):
                        <view>{{ data.height |toFixed }}</view>
                    </view>
                    <view class="item">年龄:
                        <view>{{ data.age }}</view>
                    </view>
                    <view class="item">性别:
                        <view>{{ data.sex == 1 ? '男' : '女' }}</view>
                    </view>
                    <view class="item">体重 (kg) :
                        <view>{{ data.weight|toFixed(1) }}</view>
                    </view>
                    <view class="item">理想体重 (kg):
                        <view>{{ data.idealWeight |toFixed(1) }}</view>
                    </view>
                    <view class="item">目标减重 (kg):
                        <view>{{ data.weightLossGoal |toFixed(1) }}</view>
                    </view>
                </view>
                <view class="assess">
                    <view class="title">体重评估：</view>
                    {{ data.weightAssessment }}
                </view>
            </view>
        </view>
        <view class="wrapper body">
            <view>
                <view class="title">体型概览 (cm)</view>
                <view class="content">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/body.png"/>
                    <view class="item p0">肩围:
                        <view>{{ data.shoulderCircumference |toFixed }}</view>
                    </view>
                    <view class="item p1">左臂围:
                        <view>{{ data.leftArmLine |toFixed }}</view>
                    </view>
                    <view class="item p2">腰围:
                        <view>{{ data.waistline |toFixed }}</view>
                    </view>
                    <view class="item p3">臀宽:
                        <view>{{ data.hipWidth|toFixed }}</view>
                    </view>
                    <view class="item p4">左大腿围:
                        <view>{{ data.leftThigCircumference|toFixed }}</view>
                    </view>
                    <view class="item p5">左小腿围:
                        <view>{{ data.leftCalfCircumference |toFixed }}</view>
                    </view>
                    <view class="item p6">肩宽:
                        <view>{{ data.shoulderWidth |toFixed }}</view>
                    </view>
                    <view class="item p7">右臂围:
                        <view>{{ data.rightArmLine |toFixed }}</view>
                    </view>
                    <view class="item p8">胸围:
                        <view>{{ data.bust |toFixed }}</view>
                    </view>
                    <view class="item p9">臀围:
                        <view>{{ data.hipline |toFixed }}</view>
                    </view>
                    <view class="item p10">右大腿围:
                        <view>{{ data.rightThigCircumference |toFixed }}</view>
                    </view>
                    <view class="item p11">右小腿围:
                        <view>{{ data.rightCalfCircumference|toFixed }}</view>
                    </view>
                </view>
                <view class="row">
                    <view>身体年龄：
                        <text>{{ data.physicalAge }}</text>
                    </view>
                    <view>体型：
                        <text>{{ data.shapeValue }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="wrapper tab">
            <view>
                <view class="nav row">
                    <view :class="{active:active===0}" @click="active=0">身体指标</view>
                    <view :class="{active:active===1}" @click="active=1">体型指标</view>
                </view>
                <view class="row" v-if="active===0">
                    <view class="item">基础代谢率（kcal）
                        <view>{{ data.basalMetabolicRate }}</view>
                    </view>
                    <view class="item">BMI（kg/㎡）
                        <view>{{ data.bmi }}</view>
                    </view>
                    <view class="item">骨量水分率（%）
                        <view>{{ data.boneMassMositureContent |toFixed }}</view>
                    </view>
                    <view class="item">脂肪率（%）
                        <view>{{ data.fatPercentage |toFixed }}</view>
                    </view>
                    <view class="item">肌肉率（%）
                        <view>{{ data.musclePercentage |toFixed }}</view>
                    </view>
                    <view class="item">蛋白率（%）
                        <view>{{ data.proteinRate |toFixed }}</view>
                    </view>
                    <view class="item">骨骼肌量（kg）
                        <view>{{ data.skeletalMuscleVolume|toFixed(1) }}</view>
                    </view>
                    <view class="item">内脏脂肪等级
                        <view>{{ data.visceralFatGrade }}</view>
                    </view>
                </view>
                <view class="mt5" v-if="active===1">
                    <view class="list-item">
                        <view class="title">重心前后倾斜
                            <text>{{ data.focusTiltForthBack }}</text>
                        </view>
                        <view class="text">人体重心和左踝关节与右踝关节中点</view>
                    </view>
                    <view class="list-item">
                        <view class="title">重心左右倾斜
                            <text>{{ data.focusTiltLeftRight }}</text>
                        </view>
                        <view class="text">人体重心和左踝关节与右踝关节中点</view>
                    </view>
                    <view class="list-item">
                        <view class="title">头侧歪
                            <text>{{ data.headAskew }}</text>
                        </view>
                        <view class="text">头和脖子</view>
                    </view>
                    <view class="list-item">
                        <view class="title">高低肩
                            <text>{{ data.highLowShoulders }}</text>
                        </view>
                        <view class="text">左右肩关节Y坐标差值</view>
                    </view>
                    <view class="list-item">
                        <view class="title">左膝盖分析
                            <text>{{ data.leftKneeAnalysis }}</text>
                        </view>
                    </view>
                    <view class="list-item">
                        <view class="title">右膝盖分析
                            <text>{{ data.rightKneeAnalysis }}</text>
                        </view>
                    </view>
                    <view class="list-item">
                        <view class="title">左腿XOKD
                            <text>{{ data.leftLegKokd }}</text>
                        </view>
                    </view>
                    <view class="list-item">
                        <view class="title">右腿XOKD
                            <text>{{ data.rightLegKokd }}</text>
                        </view>
                    </view>
                    <view class="list-item">
                        <view class="title">左圆肩
                            <text>{{ data.leftRoundShoulder }}</text>
                        </view>
                    </view>
                    <view class="list-item">
                        <view class="title">右圆肩
                            <text>{{ data.rightRoundShoulder }}</text>
                        </view>
                    </view>
                    <view class="list-item">
                        <view class="title">腿形
                            <text>{{ data.legform }}</text>
                        </view>
                    </view>
                    <view class="list-item">
                        <view class="title">长短腿（cm）
                            <text>{{ data.longShortLeg |toFixed }}</text>
                        </view>
                        <view class="text">左腿长度-右腿长度</view>
                    </view>
                    <view class="list-item">
                        <view class="title">骨盆前倾
                            <text>{{ data.pelvicAnteversion }}</text>
                        </view>
                        <view class="text">脖子和左髋关节与右髋关节中点，左踝关节与右踝关节中点</view>
                    </view>
                    <view class="list-item">
                        <view class="title">头部前倾
                            <text>{{ data.pokingChin }}</text>
                        </view>
                        <view class="text">左耳和脖子</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="row btn" @click="downloadShow=true" v-if="!isShare">
            <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/download-btn.png"/>
            下载报告
        </view>
        <view style="height:37px" v-if="filler"/>
        <u-popup :show="shareShow" @close="shareShow=false" round="40" :closeOnClickOverlay="false">
            <View class="row">
                <button class="share-item" open-type="share">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wechat.png" class="share"/>
                    微信好友
                </button>
                <view class="share-item" @click="onSave">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/saveicon.png" class="share"/>
                    保存图片
                </view>
            </View>
        </u-popup>
        <u-popup :show="downloadShow" @close="downloadShow=false" round="40" closeable>
            <view class="download-content">
                <view class="title">下载报告</view>
                <view class="text">报告将通过pdf形式，发送至您的邮箱；请填写正确的邮箱，否则会收不到哦～</view>
                <view class="input row">
                    <text>*</text>
                    邮箱：
                    <input placeholder="请输入您的邮箱" placeholder-style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #999999;" v-model="mail" :adjust-position="false"/>
                </view>
                <view :style="{height:`${h}px`}"/>
                <view class="row btn" @click="onSubmit">提交</view>
            </view>
        </u-popup>
        <view class="poster" :style="{opacity:downloadShow?.5:1}" v-if="shareShow">
            <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/close.png" @click="shareShow=false" class="close"/>
            <view>
                <view class="wrapper detail" style="margin-top: 15px;">
                    <view>
                        <view class="name">{{ data.name }}</view>
                        <view class="row">
                            <view class="item">身高 (cm):
                                <view>{{ data.height |toFixed }}</view>
                            </view>
                            <view class="item">年龄:
                                <view>{{ data.age }}</view>
                            </view>
                            <view class="item">性别:
                                <view>{{ data.sex == 1 ? '男' : '女' }}</view>
                            </view>
                            <view class="item">体重 (kg) :
                                <view>{{ data.weight|toFixed(1) }}</view>
                            </view>
                            <view class="item">理想体重 (kg):
                                <view>{{ data.idealWeight |toFixed(1) }}</view>
                            </view>
                            <view class="item">目标减重 (kg):
                                <view>{{ data.weightLossGoal |toFixed(1) }}</view>
                            </view>
                        </view>
                        <view class="assess">
                            <view class="title">体重评估：</view>
                            {{ data.weightAssessment }}
                        </view>
                    </view>
                </view>
                <view class="wrapper body">
                    <view>
                        <view class="title">体型概览 (cm)</view>
                        <view class="content">
                            <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/body.png"/>
                            <view class="item p0">肩围:
                                <view>{{ data.shoulderCircumference |toFixed }}</view>
                            </view>
                            <view class="item p1">左臂围:
                                <view>{{ data.leftArmLine |toFixed }}</view>
                            </view>
                            <view class="item p2">腰围:
                                <view>{{ data.waistline |toFixed }}</view>
                            </view>
                            <view class="item p3">臀宽:
                                <view>{{ data.hipWidth|toFixed }}</view>
                            </view>
                            <view class="item p4">左大腿围:
                                <view>{{ data.leftThigCircumference|toFixed }}</view>
                            </view>
                            <view class="item p5">左小腿围:
                                <view>{{ data.leftCalfCircumference |toFixed }}</view>
                            </view>
                            <view class="item p6">肩宽:
                                <view>{{ data.shoulderWidth |toFixed }}</view>
                            </view>
                            <view class="item p7">右臂围:
                                <view>{{ data.rightArmLine |toFixed }}</view>
                            </view>
                            <view class="item p8">胸围:
                                <view>{{ data.bust |toFixed }}</view>
                            </view>
                            <view class="item p9">臀围:
                                <view>{{ data.hipline |toFixed }}</view>
                            </view>
                            <view class="item p10">右大腿围:
                                <view>{{ data.rightThigCircumference |toFixed }}</view>
                            </view>
                            <view class="item p11">右小腿围:
                                <view>{{ data.rightCalfCircumference|toFixed }}</view>
                            </view>
                        </view>
                        <view class="row">
                            <view>身体年龄：
                                <text>{{ data.physicalAge }}</text>
                            </view>
                            <view>体型：
                                <text>{{ data.shapeValue }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="wrapper tab">
                    <view style="overflow: hidden">
                        <view class="label">体型指标</view>
                        <view class="row" style="margin-top: 0;">
                            <view class="item">基础代谢率（kcal）
                                <view>{{ data.basalMetabolicRate }}</view>
                            </view>
                            <view class="item">BMI（kg/㎡）
                                <view>{{ data.bmi }}</view>
                            </view>
                            <view class="item">骨量水分率（%）
                                <view>{{ data.boneMassMositureContent |toFixed }}</view>
                            </view>
                            <view class="item">脂肪率（%）
                                <view>{{ data.fatPercentage |toFixed }}</view>
                            </view>
                            <view class="item">肌肉率（%）
                                <view>{{ data.musclePercentage |toFixed }}</view>
                            </view>
                            <view class="item">蛋白率（%）
                                <view>{{ data.proteinRate |toFixed }}</view>
                            </view>
                            <view class="item">骨骼肌量（kg）
                                <view>{{ data.skeletalMuscleVolume|toFixed(1) }}</view>
                            </view>
                            <view class="item">内脏脂肪等级
                                <view>{{ data.visceralFatGrade }}</view>
                            </view>
                        </view>
                        <view class="label bor">体型指标</view>
                        <view class="mt5">
                            <view class="list-item">
                                <view class="title">重心前后倾斜
                                    <text>{{ data.focusTiltForthBack }}</text>
                                </view>
                                <view class="text">人体重心和左踝关节与右踝关节中点</view>
                            </view>
                            <view class="list-item">
                                <view class="title">重心左右倾斜
                                    <text>{{ data.focusTiltLeftRight }}</text>
                                </view>
                                <view class="text">人体重心和左踝关节与右踝关节中点</view>
                            </view>
                            <view class="list-item">
                                <view class="title">头侧歪
                                    <text>{{ data.headAskew }}</text>
                                </view>
                                <view class="text">头和脖子</view>
                            </view>
                            <view class="list-item">
                                <view class="title">高低肩
                                    <text>{{ data.highLowShoulders }}</text>
                                </view>
                                <view class="text">左右肩关节Y坐标差值</view>
                            </view>
                            <view class="list-item">
                                <view class="title">左膝盖分析
                                    <text>{{ data.leftKneeAnalysis }}</text>
                                </view>
                            </view>
                            <view class="list-item">
                                <view class="title">右膝盖分析
                                    <text>{{ data.rightKneeAnalysis }}</text>
                                </view>
                            </view>
                            <view class="list-item">
                                <view class="title">左腿XOKD
                                    <text>{{ data.leftLegKokd }}</text>
                                </view>
                            </view>
                            <view class="list-item">
                                <view class="title">右腿XOKD
                                    <text>{{ data.rightLegKokd }}</text>
                                </view>
                            </view>
                            <view class="list-item">
                                <view class="title">左圆肩
                                    <text>{{ data.leftRoundShoulder }}</text>
                                </view>
                            </view>
                            <view class="list-item">
                                <view class="title">右圆肩
                                    <text>{{ data.rightRoundShoulder }}</text>
                                </view>
                            </view>
                            <view class="list-item">
                                <view class="title">腿形
                                    <text>{{ data.legform }}</text>
                                </view>
                            </view>
                            <view class="list-item">
                                <view class="title">长短腿（cm）
                                    <text>{{ data.longShortLeg |toFixed }}</text>
                                </view>
                                <view class="text">左腿长度-右腿长度</view>
                            </view>
                            <view class="list-item">
                                <view class="title">骨盆前倾
                                    <text>{{ data.pelvicAnteversion }}</text>
                                </view>
                                <view class="text">脖子和左髋关节与右髋关节中点，左踝关节与右踝关节中点</view>
                            </view>
                            <view class="list-item">
                                <view class="title">头部前倾
                                    <text>{{ data.pokingChin }}</text>
                                </view>
                                <view class="text">左耳和脖子</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <canvas canvas-id="cvs" id="myCanvas"/>
    </view>
</template>

<script>
export default {
    data() {
        return {
            background: 'transparent',
            statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 10 + 'px',
            data: {},
            shareShow: false,
            downloadShow: false,
            isShare: false,
            active: 0,
            mail: '',
            tempFilePath: '',
            filler: false,
            h: 0
        };
    },
    watch: {
        downloadShow(bool) {
            if (!bool) {
                this.mail = '';
            }
        }
    },
    methods: {
        onBack() {
            this.isShare ? uni.switchTab({ url: '/pages/home/home' }) : uni.navigateBack();
        },
        onSave() {
            uni.saveImageToPhotosAlbum({
                filePath: this.tempFilePath,
                success() {
                    uni.showToast({ title: '保存成功', icon: 'none' });
                },
                fail(e) {
                    uni.openSetting();
                    if (e.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
                        uni.showToast({ title: '请授权图片保存到相册', icon: 'none' });
                    } else {
                        uni.showToast({ title: '图片保存失败', icon: 'none' });
                    }
                },
                complete: () => this.shareShow = false
            });
        },
        async onSubmit() {
            const { data: { id }, mail } = this;
            if (!/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(mail)) {
                return uni.showToast({ title: '邮箱格式不正确', icon: 'none' });
            }
            const img = `data:image/jpeg;base64,${uni.getFileSystemManager().readFileSync(this.tempFilePath, 'base64')}`;
            await this.request.httpTokenJsonRequest('/mp-api/wx/scanReport/mail', {
                id,
                mail,
                img
            }, 'POST');
            this.downloadShow = false;
            uni.showModal({
                title: '提交成功',
                content: '您可在邮箱中下载报告',
                showCancel: false,
                confirmText: '知道了',
                confirmColor: '#00604E'
            });
        },
        toFixed(value, step = 10, fractionDigits = 1) {
            return (value / step).toFixed(fractionDigits);
        },
        onDraw() {
            const ctx = uni.createCanvasContext('cvs', this);
            ctx.setFillStyle('#DFEDE9');
            ctx.fillRect(0, 0, 345, 2220);
            ctx.drawImage('/static/img/cvs1.png', 15, 15, 315, 278);
            ctx.drawImage('/static/img/cvs2.png', 15, 310, 315, 496);
            ctx.drawImage('/static/img/cvs3.png', 15, 821, 315, 1383);
            ctx.setTextBaseline('top');
            ctx.setFillStyle('#333333');
            ctx.setFontSize(16);
            ctx.fillText(this.data.name, 30, 30);
            ctx.setTextAlign('center');
            ctx.fillText(this.toFixed(this.data.height), 75, 91);
            ctx.fillText(this.data.age, 175, 91);
            ctx.fillText(this.data.sex == 1 ? '男' : '女', 269, 91);
            ctx.fillText(this.toFixed(this.data.weight, 1), 75, 162);
            ctx.fillText(this.toFixed(this.data.idealWeight, 1), 175, 162);
            ctx.fillText(this.toFixed(this.data.weightLossGoal, 1), 269, 162);
            ctx.setTextAlign('left');
            ctx.setFontSize(13);
            ctx.fillText(this.data.weightAssessment, 45, 245);
            ctx.setTextAlign('center');
            ctx.setFontSize(18);
            ctx.setFillStyle('#00604E');
            ctx.fillText(this.toFixed(this.data.shoulderCircumference), 71, 398);
            ctx.fillText(this.toFixed(this.data.leftArmLine), 71, 458);
            ctx.fillText(this.toFixed(this.data.waistline), 71, 518);
            ctx.fillText(this.toFixed(this.data.hipWidth), 71, 578);
            ctx.fillText(this.toFixed(this.data.leftThigCircumference), 71, 638);
            ctx.fillText(this.toFixed(this.data.leftCalfCircumference), 71, 698);
            ctx.fillText(this.toFixed(this.data.shoulderWidth), 277, 398);
            ctx.fillText(this.toFixed(this.data.rightArmLine), 277, 458);
            ctx.fillText(this.toFixed(this.data.bust), 277, 518);
            ctx.fillText(this.toFixed(this.data.hipline), 277, 578);
            ctx.fillText(this.toFixed(this.data.rightThigCircumference), 277, 638);
            ctx.fillText(this.toFixed(this.data.rightCalfCircumference), 277, 698);
            ctx.setTextAlign('left');
            ctx.setFillStyle('#FFFFFF');
            ctx.fillText(this.data.physicalAge, 124, 755);
            ctx.fillText(this.data.shapeValue, 251, 755);
            ctx.setFillStyle('#333333');
            ctx.setFontSize(24);
            ctx.fillText(this.data.basalMetabolicRate, 45, 917);
            ctx.fillText(this.toFixed(this.data.boneMassMositureContent), 45, 1006);
            ctx.fillText(this.toFixed(this.data.musclePercentage), 45, 1095);
            ctx.fillText(this.toFixed(this.data.skeletalMuscleVolume, 1), 45, 1184);
            ctx.fillText(this.data.bmi, 192, 917);
            ctx.fillText(this.toFixed(this.data.fatPercentage), 192, 1006);
            ctx.fillText(this.toFixed(this.data.proteinRate), 192, 1095);
            ctx.fillText(this.data.visceralFatGrade, 192, 1184);
            ctx.setFillStyle('#00604E');
            ctx.setFontSize(14);
            ctx.fillText(this.data.focusTiltForthBack, 286, 1307);
            ctx.fillText(this.data.focusTiltLeftRight, 286, 1382);
            ctx.fillText(this.data.headAskew, 286, 1457);
            ctx.fillText(this.data.highLowShoulders, 286, 1532);
            ctx.fillText(this.data.leftKneeAnalysis, 286, 1607);
            ctx.fillText(this.data.rightKneeAnalysis, 286, 1660);
            ctx.fillText(this.data.leftLegKokd, 286, 1713);
            ctx.fillText(this.data.rightLegKokd, 286, 1766);
            ctx.fillText(this.data.leftRoundShoulder, 286, 1819);
            ctx.fillText(this.data.rightRoundShoulder, 286, 1872);
            ctx.fillText(this.data.legform, 286, 1925);
            ctx.fillText(this.toFixed(this.data.longShortLeg), 286, 1978);
            ctx.fillText(this.data.pelvicAnteversion, 286, 2053);
            ctx.fillText(this.data.pokingChin, 286, 2145);
            ctx.draw(false, () => uni.canvasToTempFilePath({
                canvasId: 'cvs',
                quality: 1,
                width: 345,
                height: 2220,
                success: ({ tempFilePath }) => this.tempFilePath = tempFilePath
            }));
        },
        isNewIphone() {
            const { model, screenWidth, screenHeight } = uni.getSystemInfoSync();
            let isNewPhone = /(iPhone (X|11|12|13|14|15|16))|(unknown.*iPhone)/.test(model);
            if (isNewPhone) {
                // 判断是否为iphone SE,1334 x 750 像素分辨率
                isNewPhone = !(screenWidth === 375 && screenHeight === 667);
            }
            return isNewPhone;
        }
    },
    onPageScroll({ scrollTop }) {
        this.background = scrollTop > 30 ? 'white' : 'transparent';
    },
    async onLoad({ id, flag }) {
        this.filler = this.isNewIphone();
        this.isShare = !!flag;
        const { data } = await this.request.httpTokenJsonRequest(`/mp-api/wx/scanReport/detail/${id}`, null, 'GET');
        this.data = data;
        this.onDraw();
        uni.onKeyboardHeightChange(({ height }) => this.h = height / 1.5);
    },
    onShareAppMessage() {
        this.shareShow = false;
        return {
            title: '体重仪器检测报告',
            path: `/packageHome/pages/inspectionReportDetail/index?id=${this.data.id}&flag=1`
        };
    }
};
</script>

<style scoped lang="scss">
.page {
    background: #DFEDE9;
}
.header {
    background: url('https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/report_detail_bg.png') no-repeat;
    background-size: cover;
    padding: 0 15px;
    box-sizing: border-box;
    height: 320px;
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        z-index: 1000;
        .back {
            position: absolute;
            left: 15px;
            width: 50px;
            text-align: left;
            image {
                width: 10px;
                height: 18px;
            }
        }
    }
    .row {
        // margin-top: 65px;
        .btn {
            width: 54px;
            height: 28px;
            border-radius: 20px;
            border: 1px solid #000000;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .title {
            font-size: 24px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            display: flex;
            justify-content: space-between;
            align-items: center;
            image {
                width: 69px;
                height: 30px;
                margin-right: -15px;
            }
        }
        .text {
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
        }
        .time {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(51, 51, 51, .6);
        }

    }
}
.detail {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #FFFFFF;
    // margin-top: -150px !important;
    .name {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
    }
    .row {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 7px;
        .item {
            width: 33%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 65px;
            flex-direction: column;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            view {
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #333333;
                margin-top: 5px;
            }
        }
        .item:nth-of-type(1),
        .item:nth-of-type(2),
        .item:nth-of-type(3) {
            border-bottom: 1px dashed rgba(188, 203, 199, .3);
        }
        .item:nth-of-type(2),
        .item:nth-of-type(5) {
            border-left: 1px dashed rgba(188, 203, 199, .3);
            border-right: 1px dashed rgba(188, 203, 199, .3);
        }
    }
    .assess {
        padding: 15px;
        background: #FFFFFF;
        border-radius: 8px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-top: 20px;
        .title {
            font-size: 13px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #00604E;
            margin-bottom: 5px;
        }
    }
}
.body {
    background: #FFFFFF;
    border-radius: 12px;
    .title {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
    }
    .content {
        position: relative;
        text-align: center;
        image {
            width: 147px;
            height: 394px;
            margin-top: 20px;
        }
        .item {
            width: 84px;
            height: 56px;
            background: #F3F7F6;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            position: absolute;
            view {
                font-size: 20px;
                font-family: DINCondensed-Bold, DINCondensed;
                font-weight: bold;
                color: #00604E;
                margin-top: 3px;
            }
        }
        @for $i from 0 through 5 {
            .p#{$i} {
                top: 30px + $i*65px;
                left: 0;
            }
            .p#{$i+6} {
                top: 30px + $i*65px;
                right: 0;
            }
        }
    }
    .row {
        margin-top: 20px;
        view {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            flex: 1;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            text {
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #FFFFFF;
            }
        }
        view:first-of-type {
            background: url('../../../static/img/body-green-btn.png') no-repeat center;
            background-size: 100%;
        }
        view:last-of-type {
            background: url('../../../static/img/body-orange-btn.png') no-repeat center;
            background-size: 100%;
        }
    }
}
.tab {
    background: #FFFFFF;
    border-radius: 12px;
    .nav {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        view {
            flex: 1;
            text-align: center;
        }
        .active {
            font-size: 15px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            position: relative;
            &:after {
                content: '';
                width: 16px;
                height: 3px;
                background: linear-gradient(296deg, #36A782 0%, #56CCAB 100%);
                box-shadow: 0px -2px 8px 0px rgba(57, 171, 134, 0.5);
                position: absolute;
                bottom: -10px;
                left: 50%;
                margin-left: -8px;
            }
        }
    }
    .row {
        flex-wrap: wrap;
        margin-top: 20px;
        .item {
            width: calc(50% - 5px);
            background: #F6F6F6;
            border-radius: 10px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            padding: 15px 15px 10px;
            box-sizing: border-box;
            view {
                font-size: 24px;
                font-family: DINCondensed-Bold, DINCondensed;
                font-weight: bold;
                color: #333333;
                margin-top: 10px;
                width: 100%;
            }
        }
        .item:nth-of-type(odd) {
            margin-right: 10px;
        }
    }
    .row:first-of-type {
        margin-top: 0;
    }
    .mt5 {
        margin-top: 5px;
        .list-item {
            border-bottom: 1px solid #F7F7F7;
            padding: 15px 0;
            .title {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text {
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #00604E;
                }
            }
            .text {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                margin-top: 5px;
            }
        }
        .list-item:last-of-type {
            border-bottom: 0;
            padding-bottom: 0;
        }
    }
}
.btn {
    height: 48px;
    background: linear-gradient(180deg, #46C09E 0%, #156D4F 100%);
    box-shadow: 0px 12px 24px 0px rgba(55, 168, 148, 0.2);
    border-radius: 12px;
    justify-content: center;
    margin: 0 15px;
    font-size: 15px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 20px;
    image {
        width: 24px !important;
        height: 24px !important;
        margin-right: 5px;
    }
}
.share-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 15px 0 30px;
    background: transparent;
    image {
        width: 42px;
        height: 42px;
        margin-bottom: 5px;
    }
}
.download-content {
    padding: 15px;
    .title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-bottom: 10px;
    }
    .text {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        margin-bottom: 40px;
    }
    .input {
        padding: 15px;
        background: #F6F6F6;
        border-radius: 10px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        text {
            color: #E29551;
            margin-right: 5px;
        }
        input {
            flex: 1;
            margin-left: 10px;
        }
    }
    .btn {
        margin: 60px 0 0;
    }
}
.poster {
    width: 345px;
    height: 60%;
    position: fixed;
    top: 14.5%;
    left: 50%;
    margin-left: -172.5px;
    z-index: 99999;
    .close {
        width: 24px;
        height: 24px;
        position: absolute;
        top: -35px;
        right: 0;
    }
    & > view {
        width: 345px;
        height: 100%;
        overflow-y: auto;
        border-radius: 12px;
        background: #DFEDE9;
        image {
            width: 345px;
            height: 2220px;
            border-radius: 12px;
        }
    }
    .label {
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            left: -17.5px;
            top: 5px;
            width: 5px;
            height: 13px;
            border-radius: 5px;
            background: #009977;
        }
    }
    .bor {
        padding-top: 20px;
        border-top: 1px solid #F7F7F7;
        margin-top: 20px;
        &:before {
            top: 25px;
        }
    }
}
#myCanvas {
    width: 345px;
    height: 2220px;
    position: absolute;
    top: -9999px;
    left: -9999px;
}
.wrapper {
    margin: 0 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    & > view {
        // width: 345px;
        margin: 0 auto;
        padding: 15px;
        box-sizing: border-box;
    }
}
.row {
    display: flex;
    align-items: center;
    .checkbox {
        width: 18px;
        height: 18px;
        border: 1px solid #999999;
        position: relative;
        border-radius: 50%;
        margin-right: 10px;
        image {
            width: 19px;
            height: 19px;
            position: absolute;
            top: -1px;
            left: -1px;
        }
    }
    & > image {
        width: 40px;
        height: 40px;
        margin-right: 15px;
    }
    .content {
        flex: 1;
    }
}
</style>
